<template>
	<!-- <view class="login">
		<uni-title type="h1" title="登录"></uni-title>
		<view class="login-part"></view>
		<uni-easyinput v-model="username" placeholder="请输入账号"></uni-easyinput>
		<view class="login-part"></view>
		<uni-easyinput v-model="password" placeholder="请输入密码" type="password"></uni-easyinput>
		<button class="login-btn" type="default" plain="true" @click="toLogin">登录</button>
	</view> -->
	<view class="container">
		<form @submit="formLogin">
			<view class="tui-login-from">
				<view class="tui-line-cell">
					<tui-icon name="mobile" :size="20" color="#6d7a87"></tui-icon>
					<input placeholder-class="tui-phcolor" class="tui-input" name="username" placeholder="请输入用户名"
						maxlength="11" v-model="username" type="number" />
					<!-- <view class="tui-icon-close" v-show="username" @click="clearInput(1)">
						<tui-icon name="close-fill" :size="16" color="#bfbfbf"></tui-icon>
					</view> -->
				</view>
				<view class="tui-line-cell tui-top28">
					<tui-icon name="pwd" :size="20" color="#6d7a87"></tui-icon>
					<!-- <input placeholder-class="tui-phcolor" class="tui-input" name="loginPwd" placeholder="请输入密码"
						maxlength="50" v-model="loginaPwd" type="safe-password" /> -->

					<input class="tui-input" name="loginPwd" :adjust-position="false" placeholder="请输入密码"
						:password="true" v-model="loginaPwd" placeholder-class="tui-phcolor" type="text"
						maxlength="36" />

					<!-- <view class="tui-icon-close" v-show="loginaPwd" @click="clearInput(2)">
						<tui-icon name="close-fill" :size="16" color="#bfbfbf"></tui-icon>
					</view> -->

				</view>
				<button class="tui-button-primary tui-btn-submit" hover-class="tui-button-hover"
					form-type="submit">登录</button>
				<!-- <view class="tui-protocol" hover-class="opcity" :hover-stay-time="150">
					点击"登录"即表示已同意
					<text class="tui-protocol-red" @tap="protocol">《用户协议》</text>
				</view> -->
			</view>
		</form>
	</view>
</template>

<script>
	import dayjs from 'dayjs'
	import util from '@/utils/util.js'
	import form from '@/components/common/tui-validation/tui-validation.js'
	import cookie from '@/utils/store/cookie.js'
	import {
		handleGetUserInfo
	} from '@/utils'
	import {
		login
	} from '@/apis/user'

	import {
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				type: 1,
				// username: '13623702057',
				username: '', //分拣号
				loginaPwd: '',
			}
		},
		onLoad() {

		},
		methods: {
			clearInput(type) {
				if (type == 1) {
					this.username = '';
				} else {
					this.loginaPwd = '';
				}
			},
			// inputUserName: function(e){
			// 	this.username = e.detail.value;
			// },
			// inputPwd: function(e) {
			// 	this.loginaPwd = e.detail.value;
			// },
			formLogin: function(e) {
				// let loginPwd = this.loginaPwd;
				// let username = this.username;

				let loginPwdR = e.detail.value.loginPwd;
				let usernameR = e.detail.value.username;
				console.log(loginPwdR + " " + usernameR)
				let rules = [
					// {
					// 	name: 'username',
					// 	rule: ['required'],
					// 	msg: ['请输入用户名']
					// },
					{
						name: 'mobile',
						rule: ['required', 'isMobile'],
						msg: ['请输入手机号码', '请输入正确的手机号码']
					},
					{
						name: 'loginPwd',
						rule: ['required'],
						msg: ['请输入密码']
					}
				];
				//进行表单检查
				let formData = {
					// username: username,
					loginPwd: loginPwdR,
					mobile: usernameR
				};
				let checkRes = form.validation(formData, rules);
				// if (checkRes) {
				// 	this.tui.toast(checkRes);
				// 	return;
				// }
				let params = {
					username: e.detail.value.username,
					password: e.detail.value.loginPwd
				}
				//参数
				login(params)
					.then(res => {
						console.log(res)
						this.$store.commit('login', res.token)
						handleGetUserInfo()
						// uni.navigateTo({
						// 	url: '/pages/index/index'
						// })

					})
					.catch(err => {
						console.log(err)
						uni.showToast({
							title: err.msg,
							icon: 'none',
							duration: 2000,
						})
					})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.tui-bg-box {
		width: 100%;
		box-sizing: border-box;
		position: relative;
		padding-top: 44rpx;
	}

	.tui-photo {
		height: 138rpx;
		width: 138rpx;
		display: block;
		margin: 10rpx auto 0 auto;
		border-radius: 50%;
		position: relative;
		z-index: 2;
	}

	.tui-login-name {
		width: 128rpx;
		height: 40rpx;
		font-size: 30rpx;
		color: #fff;
		margin: 36rpx auto 0 auto;
		text-align: center;
		position: relative;
		z-index: 2;
	}

	.tui-bg-img {
		width: 100%;
		height: 346rpx;
		display: block;
		position: absolute;
		top: 0;
	}

	.tui-login-from {
		width: 100%;
		padding: 128rpx 104rpx 0 104rpx;
		box-sizing: border-box;
	}

	.tui-input {
		font-size: 32rpx;
		flex: 1;
		display: inline-block;
		padding-left: 32rpx;
		box-sizing: border-box;
		overflow: hidden;
	}

	.tui-line-cell {
		padding: 27rpx 0;
		display: -webkit-flex;
		display: flex;
		-webkiit-align-items: center;
		align-items: center;
		position: relative;
		box-sizing: border-box;
		overflow: hidden;
	}

	.tui-line-cell::after {
		content: '';
		position: absolute;
		border-bottom: 1rpx solid #e0e0e0;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		bottom: 0;
		right: 0;
		left: 0;
	}

	.tui-top28 {
		margin-top: 28rpx;
	}

	.tui-btn-class {
		width: 196rpx !important;
		height: 54rpx !important;
		border-radius: 27rpx !important;
		font-size: 28rpx !important;
		padding: 0 !important;
		line-height: 54rpx !important;
	}

	.tui-btn-submit {
		margin-top: 100rpx;
	}

	.tui-protocol {
		color: #333;
		font-size: 24rpx;
		text-align: center;
		width: 100%;
		margin-top: 29rpx;
	}

	.tui-protocol-red {
		color: #f54f46;
	}
</style>